<template>
  <div>
    <div @mouseenter="intoOpacity()"
         @mouseleave="outOpacity()"
         ref="submitButtonRef"
         class="submitButtonCls">
      <span class="submitFontCls" ref="submitFontRef">{{msg}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "SubmitButton",
    props: {
      buttonBackColor: {
        type: String,
        default: "silver"
      },
      buttonFontColor: {
        type: String,
        default: "gray"
      },
      textMsg: {
        type: String,
        default: "测试文字"
      },
      buttonWidth: {
        type: Number,
        default: 190
      },
      buttonHeight: {
        type: Number,
        default: 58
      }
    },
    watch: {
      buttonBackColor(newVal,oldVal){
        this.btnBackColor = newVal;
        this.updateStatus();
      },
      buttonFontColor(newVal,oldVal){
        this.btnFontColor = newVal;
        this.updateStatus();
      },
      textMsg(newVal,oldVal){
        this.msg = newVal;
        this.updateStatus();
      }
    },
    data() {
      return {
        btnBackColor: this.buttonBackColor,
        btnFontColor: this.buttonFontColor,
        msg: this.textMsg
      }
    },
    methods: {
      intoOpacity() {
        let buttonRef = this.$refs.submitButtonRef;
        if (buttonRef) buttonRef.style.opacity = 0.7;
      },
      outOpacity() {
        let buttonRef = this.$refs.submitButtonRef;
        if (buttonRef) buttonRef.style.opacity = 1;
      },
      updateStatus(){
        let tempUpdateFontCls = this.$refs.submitFontRef;
        if (tempUpdateFontCls) tempUpdateFontCls.style.color = this.btnFontColor;
        let submitButtonRef = this.$refs.submitButtonRef;
        if (submitButtonRef) submitButtonRef.style.backgroundColor = this.btnBackColor;
      }
    },
    mounted() {
      this.updateStatus();
      //修改按钮的宽高度
      let submitButtonRef = this.$refs.submitButtonRef;
      if (submitButtonRef){
        submitButtonRef.style.width = this.buttonWidth+"px";
        submitButtonRef.style.height = this.buttonHeight+"px";
      }
    }
  }
</script>

<style scoped>
  .submitButtonCls {
    cursor: pointer;
    font-size: 16px;
    width: 190px;
    height: 58px;
    background-color: silver;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center
  }
</style>
